{% extends 'layout/base.html' %}
{% load static %}



{% block css %}
    <link rel="stylesheet" href="{% static 'app01/css/account.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
    <style>
        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 25px;
            width: 25px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }

        .btn_layout {
            margin-bottom: 10px;
        }
    </style>
{% endblock %}


<!--搜索功能-->
{% block search_form %}
    <div class="col-lg-5 mb-3">
        <form action="{% url 'search' %}" method="post">
            {% csrf_token %}
            <div class="input-group my_width_tow">
                <input type="text" class="form-control" placeholder="请输入项目名" name="search_key" value="{{ search_key }}">
                &nbsp;&nbsp
                <button class="btn btn-success btn-group-sm" type="submit"><i class="fa fa-search"></i>
                    搜 索
                </button>
            </div>
        </form>
    </div>
{% endblock %}


<!--面包肖导航-->
{% block breadcrumb %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">项目列表</li>
        </ol>
    </nav>
{% endblock %}

{% block content %}

    <div class="btn_layout">
        <a class="btn btn-info btn-sm" id="add" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
           data-whatever="新建项目">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> 添加项目</a>
    </div>

    <!--如果项目表有数据就展示-->
    <table class="table table-bordered table-sm">
        <thead class="thead_size">
        <tr>
            <th>ID</th>
            <th scope="col">项目名&nbsp|&nbsp测试url</th>
            <th scope="col">描述</th>
            <th scope="col">开始时间&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;结束时间</th>
            <th scope="col">用例数量&nbsp;|&nbsp;覆盖率</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        {% if it_obj %}
            {% for foo in it_obj %}
                <tr>
                    <td>{{ foo.pk }}</td>
                    <td>
                        {{ foo.it_name }}<br/>
                        <a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="测试url"
                           data-details="{{ foo.it_url }}"
                        >{{ foo.it_url }}</a>
                    </td>
                    <td><a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="项目描述详细信息"
                           data-details="{{ foo.it_desc }}">
                        {{ foo.it_desc|truncatechars:20 }}</a></td>
                    <td>
                        {{ foo.it_start_time }}--->{{ foo.it_end_time }}
                    </td>
                    <td>{{ foo.api_set.count }}&nbsp;|&nbsp;{{ foo.coverage_rate }}</td><!--用例通过的数量 除以 总用例数量-->
                    <td>
                        <a href="{% url 'list_api' foo.pk %}" class="btn btn-success btn-sm"><i
                                class="fa fa-file-picture-o">&nbsp;</i>查看用例列表</a>
                        <a href="{% url 'upload' foo.pk %}" class="btn btn-default btn-sm"><i class="fa fa-arrow-down">&nbsp;</i>批量导入</a>
                        <a class="btn btn-info btn-sm"
                           data-bs-toggle="modal"
                           data-bs-target="#staticBackdrop"
                           data-whatever="编辑项目"
                           data-name="{{ foo.it_name }}"
                           data-desc="{{ foo.it_desc }}"
                           data-color="{{ foo.color }}"
                           data-it_url="{{ foo.it_url }}"
                           data-start_time="{{ foo.it_start_time|date:"Y-m-d" }}"
                           data-end_time="{{ foo.it_end_time|date:"Y-m-d" }}"
                           data-fid="{{ foo.pk }}"><i class="fa fa-gear">&nbsp;</i>编辑</a>
                        <a class="btn btn-danger btn-sm" data-bs-target="#my_modal" data-bs-toggle="modal"
                           data-tid="{{ foo.pk }}"><i class="fa fa-trash ">&nbsp;</i>删除</a>
                    </td>
                </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td>暂无数据</td>
            </tr>
        {% endif %}
        </tbody>
    </table>
    <!--分页-->
    {% if all_count >= 10 %}
        <nav>
            <ul class="pagination pos_fixed">
                {{ page.page_html|safe }}
            </ul>
        </nav>
    {% endif %}

    <!--添加项目modal对话框-->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            id="clickClose"></button>
                </div>
                <div class="modal-body">
                    <form id="addForm">
                        {% csrf_token %}
                        <input type="hidden" name="fid" id="fid">
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="{{ form.it_name.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.it_name.label }}</label>
                            <div class="col-md-12">
                                {{ form.it_name }}
                                <span class="error-msg"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="{{ form.it_url.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.it_url.label }}</label>
                            <div class="col-md-12">
                                {{ form.it_url }}
                                <span class="error-msg"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="{{ form.it_desc.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.it_desc.label }}</label>
                            <div class="col-md-12">
                                {{ form.it_desc }}
                                <span class="error-msg"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="{{ form.color.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.color.label }}</label>
                            <div class="col-md-12">
                                {{ form.color }}
                                <span class="error-msg"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="required">*</span>
                            <span>
                                <i class="fa fa-calendar" aria-hidden="true"></i>
                            </span>
                            <label for="{{ form.it_start_time.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.it_start_time.label }}</label>
                            <div class="col-md-5">
                                <div class="input-group">
                                    {{ form.it_start_time }}
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <span class="required">*</span>
                            <span>
                                <i class="fa fa-calendar" aria-hidden="true"></i>
                            </span>
                            <label for="{{ form.it_end_time.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.it_end_time.label }}</label>
                            <div class="col-md-5">
                                <div class="input-group">
                                    {{ form.it_end_time }}
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                        </div>
                        <br/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="bindReset">取消</button>
                    <button type="button" class="btn btn-primary" id="bindSubmit">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--删除项目二次确认modal对话框-->
    <div class="modal fade" id="my_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">提示</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>你确定删除吗?</p>
                    <form id="delete_id">
                        {% csrf_token %}
                        <input type="hidden" name="tid" id="tid">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btnSubmitDelete">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--显示完整字段对话框-->
    <!-- 模态框 -->
    <div class="modal" id="show_details">
        <div class="modal-dialog modal-sm modal-dialog-scrollable">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h6 class="modal-title"></h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <p class="all-details" style="word-wrap:break-word;"></p>
                    <br>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script src="{% static 'plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script>
        $(function () {
            initAddModal(); // modal对话框初始化
            bindClickSubmitDelete();
            bindClickSubmit();
            initDatePicker();
            bindReset();
        });

        function initAddModal() {
            /*添加和编辑初始化*/
            $('#staticBackdrop').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);  // 按钮触发模式
                var recipient = button.data('whatever'); // 从data属性中提取信息
                var name = button.data('name');
                var desc = button.data("desc");
                var fid = button.data('fid');
                var it_name = button.data("start_time");
                var it_end_time = button.data("end_time");
                var it_url = button.data("it_url");
                var color = button.data("color");
                var modal = $(this);
                modal.find('.modal-title').text(recipient);
                if (fid) {
                    //编辑
                    modal.find(".error-msg").empty();
                    modal.find('#fid').val(fid);
                    modal.find("#id_it_name").val(name);
                    modal.find("#id_it_url").val(it_url);
                    modal.find("#id_it_desc").val(desc);
                    modal.find("#id_it_start_time").val(it_name);
                    modal.find("#id_it_end_time").val(it_end_time);
                    var num = color - 1;
                    modal.find("#id_color_" + num).attr("checked", true);
                } else {
                    //新建
                    /*
                      清空模态对话框中的错误提示和输入值
                    */
                    modal.find(".error-msg").empty();
                }

            });
            /*删除modal初始化*/
            $('#my_modal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var fid = button.data('tid'); // Extract info from data-* attributes
                var modal = $(this);
                modal.find('#tid').val(fid);
            });
            /*显示完整字段信息*/
            $('#show_details').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // 按钮触发模式
                var details = button.data('details'); // 从属性中提取信息
                var recipient = button.data('whatever');
                var modal = $(this);
                modal.find(".all-details").text(details);
                modal.find(".modal-title").text(recipient);
            })

        }

        /*
        添加和编辑项目
         */
        function bindClickSubmit() {
            $("#bindSubmit").click(function () {
                $.ajax({
                    url: {% url 'index' %},
                    type: "POST",
                    data: $("#addForm").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            location.href = res.data
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0])
                            })
                        }
                    }
                })
            })
        }

        /*
        删除
         */
        var It_DETAIL_URL = "{% url 'delete_it' %}";

        function bindClickSubmitDelete() {
            $("#btnSubmitDelete").click(function () {
                $.ajax({
                    url: It_DETAIL_URL,
                    type: "POST",
                    data: $("#delete_id").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href
                        } else {
                            alert("删除项目失败")
                        }
                    }
                })
            });
        }

        /*
        时间插件initDatePicker
         */
        function initDatePicker() {
            $("#id_it_start_time,#id_it_end_time").datepicker({
                format: 'yyyy-mm-dd',
                minView: 'month',
                startDate: '0',
                language: "zh-CN",
                autoclose: true,
            });

        }

        /*
        取消和关闭modal对话框后清空表单内容
         */
        function bindReset() {
            $("#bindReset,#clickClose").click(function () {
                $("#addForm")[0].reset();
                window.location.href = location.href
            })
        }


    </script>

{% endblock %}



